

<div class="layui-form" lay-filter="layuiadmin-form-role" id="form">
	<div class="form-cont" style="overflow: auto;">
		<div class="layui-form-item verify">
		  <label class="layui-form-label">计费名称</label>
		  <div class="layui-input-block">
			  <input type="text" verify="require" v-model="detail.activity_name" placeholder="请输入计费名称" class="layui-input">
			  <span class="hint">计费名称必填</span>
			</div>
		</div>

		<div class="layui-form-item verify">
		  <label class="layui-form-label">计费类别</label>
		  <div class="layui-input-block">
			  <button type="button" class="layui-btn" @click="addtime">添加</button>
			  <input type="hidden" verify='require' v-model="detail.use_val.length==0?'':'1'"/>
			  <span class="hint" v-if="!detail.use_val.length">请添加计费类别</span>
			</div>
		</div>
		
		<div style="padding-left: 30px;" v-if="detail.use_val.length">
			<table class="layui-table">
			  <thead>
			    <tr>
			      <th>时间(小时)</th>
			      <th>金额(元)</th>
				  <th>操作</th>
			    </tr> 
			  </thead>
			  <tbody>
			    <tr v-for="(x,index) in detail.use_val">
			      <td>{{x.hours}}</td>
			      <td>{{x.price}}</td>
				  <td><a class="layui-btn layui-btn-danger layui-btn-xs" @click="del(index)"><i class="layui-icon layui-icon-delete"></i>删除</a></td>
			    </tr>
			  </tbody>
			</table>
		</div>
	</div>
  <div class="form-btn" v-if="type!=3">
      <input type="button" @click="submit" value="确认" class="layui-btn">
  </div>
</div>

<script>
	layui.use(['form'], function(){
	  var $ = layui.$
	  ,form = layui.form;
	  var forms=new Vue({
	  		el:'#form',
	  		data:{
	  			detail:{
					start_cost:2,
		             real_cost:1,
		             use_val:[/* {
						start_time:'1:00',
						end_time:'3:00',
						start_week:'星期一',
						end_week:'星期日',
						time_money:4,
						status:1
					} */],
					status:1
				},
				old_detail:{},
	  			qx:[],
				type:layui.admin.objData.type,
				//times:[],
				//weeks:[{week:'星期一'},{week:'星期二'},{week:'星期三'},{week:'星期四'},{week:'星期五'},{week:'星期六'},{week:'星期日'}]
	  		},
	  		mounted:function(){
				//初始化
	  			if(this.type!=1)this.detail=layui.admin.objData.detail,this.detail.use_val=JSON.parse(this.detail.use_val),this.old_detail=JSON.stringify(layui.admin.objData.detail);
				layui.admin.time_detail=this.detail;
	  		},
	  		methods:{
				addtime(){
					layui.admin.pups=layer.open({
						type:1,
					   id:'pup-conts',
					   title: '添加时段',
					   btn:[],
					   area: ['400px','350px'],
					   success: function(layero, index){
						$('#pup-conts').load(layui.conf.views+'hotel_time_money/time_moneyforms.html?v='+layui.cache.version);
					   }
					})
				},
				radioF(index){//radio选择
					this.detail.use_val[index].status==1?this.detail.use_val[index].status=2:this.detail.use_val[index].status=1;
				},
				radiod(){//radio选择
					this.detail.status==1?this.detail.status=2:this.detail.status=1;
				},
				del(index){
					this.detail.use_val.splice(index,1);
				},
				submit:function(){
					var num=0;
					for(var i=0; i<this.detail.use_val.length; i++){
						if(this.detail.use_val[i].status==1){
							num++;
							if(this.detail.use_val.length==num){
								return layer.msg('至少要有一条计费时段是不包时的');
							}
						}
					}
					if(layui.admin.form('#form')){
						if(this.type==2){   //编辑
							var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'hotel_id');
							if(data){

								if(data.use_val)data.use_val=JSON.stringify(data.use_val);
								layui.admin.formapi('device/hotel_rule_update',data,1,'list-select-table2');
							}
						}else{  //添加
							var datas=JSON.stringify(this.detail),datas=JSON.parse(datas);
							datas.use_val=JSON.stringify(datas.use_val);

							layui.admin.formapi('device/hotel_rule_add',datas,1,'list-select-table2');

						}
					}
				}
	  		}
	  	})
	});
</script>
